<template>
	<view>
		<view>
			<navitop>
				<i class="iconfont icon-jiantou-copy" slot="left-slot" @click="previous_page"></i>
				<span slot="center-slot"><h4>{{title}}</h4></span>
				<!-- <i  slot="right-slot" class="iconfont icon-youcecaidan" @click="library_click" ></i> -->
			</navitop> 
		</view>
		<view>
			 <!-- 选择列表 -->
			<div :style="'padding-top:' + nv_height" class="div_out">
				<div class="div_list">
					<div class="div_left">
						单据编号：
					</div>
					<div class="div_right">
						<input v-model="url_dataSorce.voucherCode" disabled="true">
					</div>
				</div>
				<div class="div_list">
					<div class="div_left">
						<span>*</span>盘点方式：
					</div>
					<div class="div_right" @click="dow_list()">
						<input v-model="url_dataSorce.checkWay == '1'? '全盘': '抽盘' " disabled="true">
					</div>
				</div>
				<div class="div_list">
					<div class="div_left">
						<span>*</span>仓库：
					</div>
					<div class="div_right" @click="dow_warehouse_list()">
						<input v-model="url_dataSorce.warehouseName" disabled="true">
					</div>
				</div>
				<div class="div_list">
					<div class="div_left">
						<span>*</span>盘点日期：
					</div>
					<div class="div_right" @click="dow_time_data()">
						<input v-model="url_dataSorce.voucherDate" disabled="true">	
					</div>
				</div>
				<div class="div_list">
					<div class="div_left">
						部门：
					</div>
					<div class="div_right" @click="system_list()">
						<input v-model="url_dataSorce.officeName" disabled="true">	
					</div>
				</div>
				<div class="div_list">
					<div class="div_left">
						备注：
					</div>
					<div class="div_right">
						<input v-model="url_dataSorce.remarks">
					</div>
				</div>
				<div class="div_list">
					<div class="div_left">
						状态：
					</div>
					<div class="div_right">
						 {{url_dataSorce.voucherState == '1' ? '已复核' : url_dataSorce.voucherState == '2' ? '已监盘' : '未复核'}}
					</div>
				</div>
			</div>
			
			<!-- 弹窗选择明细列表 -->
			<div class="div_out">
				<div class="div_list_detailed">
					<div class="div_list_title">盘点列表</div>
					<div class="div_list_code">
						<div @click="sweep_code">扫码获取</div>
						<div @click="material_code">选择物料</div>
					</div>
				</div>
				<div class="marter_lat" v-for="(item,index) in url_dataSorce.orderDetailList" @click="edit(item)">
					<div class="marter_list_lat">
						<div class="div_left">物料编码</div>
						<div class="div_right">{{item.inventoryCode}}</div>
					</div>
					<div class="marter_list_lat">
						<div class="div_left">物料名称</div>
						<div class="div_right">{{item.inventoryName}}</div>
					</div>
					<div class="marter_list_lat">
						<div class="div_left">规格型号</div>
						<div class="div_right">{{item.inventorySpecification}}</div>
					</div>
					<div class="marter_list_lat">
						<div class="div_left">盘点数量</div>
						<div class="div_right">{{item.checkQuantity}}</div>
					</div>
					<div class="marter_list_lat">
						<div class="div_left">盈亏数量</div>
						<div class="div_right">{{item.lossOrGainQuantity}}</div>
					</div>
				</div>
			</div>
			<div style="height:100rpx; "></div>
		</view>
		<view @click="up_data" class="buttom_call">
			<div class="buttom_div">保&nbsp;&nbsp;存</div>
		</view>
		<!-- 下拉弹窗 -->
		<popus ref="dow_alert">
			<alertcenter @row="row" :dataSorc="dataSo_list" :titles="titles"></alertcenter>
		</popus>
		<!-- 时间弹窗 -->
		<popus ref="time_alert">
			<kxTime @rundata='lasttime' @cloes="cloes" :start='0' :date="data" :default_time="1"></kxTime>
		</popus>
		
		<!-- 右弹窗 -->
		<popus ref="mater">
			<div class="marter_right" :style="'width:' + nv_width + ';height:' + clas_height" @click="close_marter">
				<div class="marter_class" @click.stop="list_marter">
					<div class="marter_class_title">
						选择物料 
					</div>
					<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" >
						<div v-for="(item,index) in dataSorce" class="marter_lat" @click="rtun_list(item)">
							{{item.name}}
							<div class="marter_list_lat">
								<div class="div_left">仓库名称</div>
								<div class="div_right">{{item.actualWarehouseName}}</div>
							</div>
							<div class="marter_list_lat">
								<div class="div_left">物料编码</div>
								<div class="div_right">{{item.inventoryCode}}</div>
							</div>
							<div class="marter_list_lat">
								<div class="div_left">物料名称</div>
								<div class="div_right">{{item.inventoryName}}</div>
							</div>
							<div class="marter_list_lat">
								<div class="div_left">规格型号</div>
								<div class="div_right">{{item.inventorySpecification}}</div>
							</div>
						</div>
					</mescroll-body>
				</div>
			</div>
		</popus>
		
		<!-- 中间数量弹窗 -->
		<popus ref="alert_sub">
			<div :style="'width:' + nv_windowWidth + ';'">
				<div class="alert_out">
					<div class="alert_text_title">请输入入库数量</div>
					<div class="alert_text" >
						<div class="alert_text_left" >数量：</div>
						<div class="alert_text_right" ><input v-model="invaen_number" type="number"/></div>
					</div>
					<div class="alert_button" @click='Number_alert(C_Uid)'> 
						<button>确定</button>
					</div>
				</div>
			</div>
		</popus>
	
	
		<!-- 下拉修改弹窗 -->
		<popus ref="edit_list">
			<div class="conten">
				<div class="conten_edit">
					<div class="conten_edit_type conten_edit_public">
						<div class="conten_edit_left">
							物料编码：
						</div>
						<div class="conten_edit_right">
							{{c_data.inventoryCode}}
						</div>
					</div>
					<div class="conten_edit_type">
						<div class="conten_edit_left">
							物料名称：
						</div>
						<div class="conten_edit_right">
							{{c_data.inventoryName}}
						</div>
					</div>
					<div class="conten_edit_type">
						<div class="conten_edit_left">
							规格型号：
						</div>
						<div class="conten_edit_right">
							{{c_data.inventorySpecification}}
						</div>
					</div>
					<div class="conten_edit_type ">
						<div class="conten_edit_left">
							数量：
						</div>
						<div class="conten_edit_right conten_edit_inputs">
							<div  class="conten_edit_input">
								<input v-model="c_data.checkQuantity" type="number"/>
							</div>
							<div class="conten_edit_plus">
								<div class="conten_edit_bod conten_edit_right_bod" @click="number_plus(c_data.id)">
									+
								</div>
								<div class="conten_edit_bod" @click="number_dom(c_data.id)">
									-
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="conten_del" @click="del_list">
					<i class="iconfont icon-shanchu"></i>
				</div>
				<div class="conten_edit_bottom" @click="content_close">
					保&nbsp;&nbsp;存
				</div>
			</div>
		</popus>
		
		
		<!-- 扫码 -->
		<moncode :Scan_code="scancode"></moncode>
	</view>
</template>

<script>
import navitop from '@/components/common/navi-top'
import kxTime from "@/components/kx-datetime/kx-datetimes"
import alertcenter from '@/pages/common/common/alert/alertgx.vue'	
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import popus from '@/uni_modules/uni-popup/components/uni-popup/uni-popup'
import moncode from "@/components/dumenghanfeng-monitorScanCode/monitorScanCode.vue"
import {getCondition,inventorySearch} from "@/common/api/job/sale.js"
import {CheckgetCode,warehouseList,systempage,getBytion,inventorysave} from "@/common/api/job/bill.js"
export default {
	components:{
		navitop,
		alertcenter,
		popus,
		kxTime,
		moncode
	},
	mixins: [MescrollMixin],
	data(){
		return {
			dataSorce: [],
			rundataSorce: [],
			url_dataSorce: [],
			title: '盘点修改',
			titles: '选择弹窗',
			nv_height: '',
			nv_windowWidth: '',	//弹窗宽度
			// 下拉刷新的配置
			downOption: {
				auto: false,
				beforeEndDelay: 300
			},
			// 上拉加载的配置
			upOption: {
				auto: false,
				page: {
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: {
					use: true,
					tip: '暂无相关数据'
				},
				textNoMore: '没有更多数据了...',
				toTop: {
					offset: 1000 // 滚动多少才显示to-top 
				}
			},
			nv_width: '',
			clas_height: '',
			dataSo_list: [],
			mode:'',	// 盘点方式
			mode_id:'',	// 获取盘点id
			warehouse_data: '',	// 获取仓库
			warehouse_id: '',	// 选中仓库id
			data_time: '',	// 获取盘点时间
			ware_code: '',	// 获取盘底编号
			system_data: '',	// 获取部门
			system_id:'',	// 获取部门id
			remarks:'',	//	备注
			invaen_number: '',	// 输入数量
			C_Uid:'',
			c_data: {},
			scancode:'Inventory'	,// 广播名
			curl_data: '',
			title_data: [],	//扫码数组却从
		}
	},
	onLoad(option) {
		this.curl_data = option;
		console.log()
		let _this = this;
		uni.$off(this.scancode);
		uni.$on(this.scancode, function(rst){
			console.log('扫码结果',rst.msg)
			// 扫码去重
			if(_this.title_data.length == 0){
				_this.title_data.push(rst.msg);
				_this.PDA_code_list(rst.msg);
			}
			if(_this.title_data.indexOf(rst.msg) == -1){
				_this.PDA_code_list(rst.msg);
				_this.title_data.push(rst.msg);
			}
		})
	},
	mounted() {
		
		this.nv_height = uni.getSystemInfoSync().statusBarHeight + 65 + 'px';
		
		this.nv_width = uni.getSystemInfoSync().screenWidth + 'px';
		
		this.nv_windowWidth = uni.getSystemInfoSync().windowWidth - 20 + 'px';
		
		this.clas_height = uni.getSystemInfoSync().screenHeight + 'px';
		
		this.echo_list();
	},
	methods:{
		
		// 返回
		previous_page(){
			uni.navigateBack({})
			// uni.navigateTo({
			// 	url:'/pages/common/index/purchase/inventory/common?tak=' + this.curl_data.tak + '&code=' + this.curl_data.code + '&msg=' + this.curl_data.msg + '&title=' + this.curl_data.title
			// })
		},
		
		// 修改数据回显
		echo_list(){
			getCondition({actionType: 5,currentId: this.curl_data.id,isLossOrGain: false}).then(item => {
				if(item.code == 200){
					this.url_dataSorce = item.data;
				}
			})
		},
		
		// PDA 扫码
		PDA_code_list(code){
			this.inventory_list(code)
		},
		
		// 点击获取扫码(相机)
		sweep_code(){
			let _this = this;
			uni.scanCode({
			    onlyFromCamera: true,
			    success: function (res) {
			        console.log('条码类型：' + res.scanType);
			        console.log('条码内容：' + res.result);
					_this.inventory_list(res.result)
			    }
			});
		},
		
		// 扫码获取数据
		inventory_list(val){
			inventorySearch({inventoryCode: val,warehouseId: this.url_dataSorce.warehouseId}).then(item=> {
				if(item.code == 200){
					console.log(item)
					if(item.data){
						this.url_dataSorce.orderDetailList.push(item.data);
						this.C_Uid = item.data.id;
						this.$refs.alert_sub.open('center');
					}else {
						uni.showToast({
							title: '没有该条记录！',
							icon: 'none'
						})
					}
					
				}
			})
		},
		
		//保存
		up_data(){
			uni.showLoading({
				title: '加载中。。。'
			})
			delete this.url_dataSorce.createDate;
			inventorysave(this.url_dataSorce).then(item =>{
				if(item.code == 200){
					uni.hideLoading();
					uni.showToast({
						title: '修改成功！',
						icon: 'none'
					})
					setTimeout(()=> {
						uni.navigateTo({
							url:'/pages/common/index/purchase/inventory/common?tak=' + this.curl_data.tak + '&code=' + this.curl_data.code + '&msg=' + this.curl_data.msg + '&title=' + this.curl_data.title
						})
					},1500)
				}
			})
		},
	
		
		// 点击添加数量
		number_plus(val){
			this.url_dataSorce.orderDetailList.filter(item => {
				if(item.id == val){
					item.checkQuantity = Number(item.checkQuantity) + 1;
					item.lossOrGainQuantity = Number(item.checkQuantity) - Number(item.inventoryQuantity);
				}
			})
		},
		
		// 点击减少数量
		number_dom(val){
			this.url_dataSorce.orderDetailList.filter(item => {
				if(item.id == val){
					item.checkQuantity = Number(item.checkQuantity) - 1;
					item.lossOrGainQuantity = Number(item.checkQuantity) - Number(item.inventoryQuantity);
				}
			})
		},
		
		// 点击删除
		del_list(){
			let tanl = this.url_dataSorce.orderDetailList;
			for(let i=0 ; i< tanl.length; i++){
				if(this.c_data.id == tanl[i].id){
					tanl.splice(i,1);
				}
			}
			this.$refs.edit_list.close();
		},
		
		// 弹窗保存
		content_close(){
			let _this = this;
			this.url_dataSorce.orderDetailList.filter(item => {
				if(item.id == this.c_data.id){
					this.$set(item,'checkQuantity',_this.c_data.checkQuantity)
					if(item.inventoryQuantity){
						this.$set(item,'lossOrGainQuantity',Number(_this.c_data.checkQuantity) - Number(item.inventoryQuantity))
					}else{
						this.$set(item,'lossOrGainQuantity',Number(-_this.c_data.checkQuantity))
					}
				}
			})
			this.$refs.edit_list.close();
		},
		
		// 修改弹窗
		edit(val){
			this.c_data = val;
			this.$refs.edit_list.open('bottom')
		},
	
		
		// 获取点击列表
		rtun_list(val){
			let _this = this;
			let values = '';
			if(this.url_dataSorce.orderDetailList.length){
				values = this.url_dataSorce.orderDetailList.filter(item => item.inventoryCode == val.inventoryCode)
				if(values.length == 0){
					this.url_dataSorce.orderDetailList.push(val);
				}
			}else{
				this.url_dataSorce.orderDetailList.push(val);
				this.rundataSorce.push(val);
			}
			this.$refs.mater.close();
			this.C_Uid = val.id;
			if(this.url_dataSorce.orderDetailList){
				setTimeout(()=>{
					this.$refs.alert_sub.open('center')
				},500)
			}
		},
		
		
			
		// 数量弹窗
		Number_alert(val){
			let _this =this;
			this.url_dataSorce.orderDetailList.filter(item => {
				if(item.id == this.C_Uid){
					this.$set(item,'checkQuantity',this.invaen_number);
					if(item.inventoryQuantity){
						this.$set(item,'lossOrGainQuantity',Number(_this.invaen_number) - Number(item.inventoryQuantity))
					}else{
						this.$set(item,'lossOrGainQuantity',Number(-_this.invaen_number))
					}
				}
			})
			this.$refs.alert_sub.close();
			this.invaen_number = '';
		},

		//  选择物料/获取仓库列表
		material_code(){
			uni.showLoading({
				title: '加载中。。。'
			})
			getBytion({warehouseId: this.url_dataSorce.warehouseId,isAllowZero: false}).then(item => {
				if(item.code == 200){
					this.dataSorce = item.data.records;
					uni.hideLoading();
					this.$refs.mater.open('right')
				}
			})
		},
		
		close_marter(){
			this.$refs.mater.close();
		},
		
		// 获取部门
		system_list(){
			systempage({current: 1,size: 10,'page.current': 1,'page.size': 10}).then(item => {
				if(item.code == 200){
					this.dataSo_list = item.data.records;
					this.dataSo_list.filter(val => {
						this.$set(val,'name',val.fullName);
						this.$set(val,'code','system')
					})
					console.log(this.dataSo_list)
					this.$refs.dow_alert.open('bottom')
				}
			})
		},
		
		// 获取时间
		dow_time_data(){
			this.$refs.time_alert.open('bottom')
		},
		
		// 获取仓库
		dow_warehouse_list(){
			warehouseList({current: 1,size: 10,'page.current': 1,'page.size': 10}).then(item => {
				if(item.code == 200){
					this.dataSo_list = item.data.records
					this.dataSo_list.filter(item => {
						this.$set(item,'name',item.whName);
						this.$set(item,'code','warehouse')
					})
					this.$refs.dow_alert.open('bottom')
				}
			})
		},
		
		// 下拉时间弹窗
		lasttime(val){
			this.url_dataSorce.voucherDate = val;
			this.$refs.time_alert.close();
		},
		
		
		// 下拉弹窗
		row(val){
			if(val.code == 'mode'){	// 盘点方式
				this.url_dataSorce.checkWay = val.id;
			}
			if(val.code == 'warehouse'){
				this.url_dataSorce.warehouseName = val.name;
				this.url_dataSorce.warehouseId = val.id;
			}
			if(val.code == 'system'){
				this.url_dataSorce.officeName = val.name;
				this.url_dataSorce.officeId = val.id;
			}
			
			this.$refs.dow_alert.close();
		},
		
		// 盘点方式
		dow_list(){
			this.dataSo_list = [{id:'1',name: '全盘',code: 'mode'},{id:'2',name: '抽盘', code: "mode"}],
			this.$refs.dow_alert.open('bottom')
		},
		
		
		
		/*下拉刷新的回调*/
		downCallback(val) {
			// 下拉刷新和上拉加载调同样的接口,直接mescroll.resetUpScroll()即可
			
			setTimeout(() => {
				this.mescroll.endSuccess();
			}, 500)
		},
		
		// 上拉加载
		upCallback(page) {
			this.pages++;
			let sun = this.pages;
			// let obj = {
			// 	current: page.num, // 页码, 默认1
			// 	size: page.size, // 页长, 默认10条
			// };
			setTimeout(()=>{
				this.mescroll.endErr();
			},500)
		},
	}
}
	
</script>

<style scoped lang="scss">
 @import "@/static/css/common/index.scss";
 
 .buttom_call {
	 position: fixed;
	 bottom: 0;
	 width: 100%;
	 height: 90rpx;
	 line-height: 90rpx;
	 .buttom_div {
		 text-align: center;
		 color: #fff;
		 background-color: #007AFF;
		 border-radius: 4px;
	 }
 }
 
 // 上拉修改弹窗
 
 .conten_del {
 	position: fixed;
 	top: 0;
 	right: 5%;
 	color: red;
 	padding: 10px 10px 10px 10px;
 	font-size: 20px;
 }
 
 .conten_edit_input {
 	width: 50%;
 }
 
 .conten_edit_inputs {
 	display: flex;
 	justify-content: space-between;
 	input {
 		border: 0;
 	}
 }
 
 .conten_edit_bottom {
 	height: 50px;
 	line-height: 50px;
 	text-align: center;
 	background-color: #1890FF;
 	color: #fff;
 	font-size: 18px;
 	border-radius: 4px;
 	box-shadow: 0 12px 2px 0 rgba(0,0,0,0.1);
 }
 
 .conten_edit_public {
 	padding-top: 5px;
 }
 
 .conten_edit_bod {
 	border-top: 0 !important;
 	border-bottom: 0 !important;
 }
 
 .conten_edit_right_bod {
 	border-right: 0 !important;
 }
 
 .conten_edit_plus{
 	display: flex;
 	text-align: center;
 	div {
 		border: 1px dotted #cacaca;
 		width: 80rpx;
 	}
 }
 
 .conten_edit_type {
 	display: flex;
 	border-bottom: 1px dotted #cacaca;
 	// overflow: hidden;
 }
 .conten_edit_left {
 	width: 30%;
 }
 
 .conten_edit_right {
 	width: 70%;
 }
 
 .conten_edit {
 	height: 240px;	
 	width: 90%;
 	margin: auto;
 	div {
 		height: 80rpx;
 		line-height: 80rpx;
 	}
 }
 
 .marter_class_title {
	 padding: 10px 0 10px 10rpx;
	 color: #0098EF;
	 border-bottom: 1px solid #cacaca;
 }
 
 .marter_lat{
	 border-radius: 4px;
	 width: 95%;
	 box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
	 background-color: #fff;
	 margin: auto;
	 margin-top: 10px;
	 padding: 10rpx 0 10rpx 0;
 }
 
 .marter_list_lat {
	 display: flex;
 }
 
 .marter_class {
	 width: 70%;
	 height: 100%;
	 float: right;
	 background-color: #F0F0F0;
 }
 
 .div_list_detailed {
	 width: 95%;
	 margin: auto;
	 margin-top: 10px;
	 background-color: #fff;
	 border-radius: 4px;
	 box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
 }
 .div_list_title {
	 height: 80rpx;
	 line-height: 80rpx;
	 padding: 0 0 0 30rpx;
	 border-bottom: 1px solid #cacaca;
 }
 .div_list_code {
	 padding: 10px 0 10px 0;
	 display: flex;
	 justify-content: space-around;
	 div {
		 width: 30%;
		 height: 60rpx;
		 line-height: 60rpx;
		 text-align: center;
		 background-color: #007AFF;
		 color: #fff;
		 border-radius: 4px;
	 }
 }
 
 .alert_out {
 	background-color: #fff;
 	border-radius: 4px;
 	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 .alert_text{
 	display: flex;
 	width: 100%;
 	height: 90rpx;
 	line-height: 90rpx;
 	margin: 10px 0 10px 0;
 	padding: 10px 0 10px 0;
 }
 
 .alert_text_left {
 	width: 30%;
 	text-align: right;
 }
 .alert_button {
 	padding: 0 0 5px 0;
 	button {
 		width: 60%;
 		background-color: rgb(34, 131, 228);
 		color: #fff;
 	}
 }
 .alert_text_title {
 	padding: 10px 0 10px 30rpx;
 	font-size: 20px;
 	border-bottom: 1px solid #cacaca;
 }
 .alert_text_right {
 	width: 68%;
 	input {
 		border: 1px solid #cacaca;
 		width: 90%;
 	}
 }
 .conten {
	 background-color: #fff;
 }
</style>
